Conversation
github-project-automation
bot
moved this to 🏗 In progress
in UX Engineering Team Backlog
|
nmerget
moved this from 🏗 In progress
to 🎁 Ready for review
in UX Engineering Team Backlog
nmerget
moved this from 🎁 Ready for review
to 🏗 In progress
in UX Engineering Team Backlog
github-actions
bot
added
📕documentation
nmerget
moved this from 🏗 In progress
to 🎁 Ready for review
in UX Engineering Team Backlog
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Figma Code Connect support to the Core Web design system monorepo by introducing a Mitosis-based generator, framework-specific Code Connect workspaces, and CI workflows to build/test/publish the generated connectors (per #3428).
Changes:
- Introduces shared Figma Code Connect typings plus an initial Button mapping + Mitosis “figma lite” variants.
- Adds a dedicated Mitosis config + plugin to generate Code Connect packages into
figma-code-connect/*. - Extends the default CI pipeline with build/test/publish jobs for the Code Connect outputs and documents the setup process.
Reviewed changes
Copilot reviewed 41 out of 46 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/shared/figma.ts | Adds shared types for Code Connect metadata (props/urls). |
| packages/components/src/components/button/figma/button.figma.ts | Defines Button → Figma property mapping and URLs for Code Connect. |
| packages/components/src/components/button/figma/text.button.figma.lite.tsx | Adds Mitosis “figma lite” variant for text button connection metadata. |
| packages/components/src/components/button/figma/no-text.button.figma.lite.tsx | Adds Mitosis “figma lite” variant for icon/no-text button connection metadata. |
| packages/components/package.json | Adds generate:figma script to run the new Mitosis config. |
| packages/components/docs/how-to-figma-connect.md | Documents how to set up mappings, generate, test, and publish Code Connect. |
| packages/components/configs/mitosis.config.cjs | Excludes *.figma.* sources from the standard outputs build. |
| packages/components/configs/angular/mitosis.config.cjs | Excludes *.figma.* sources from Angular target build. |
| packages/components/configs/react/mitosis.config.cjs | Excludes *.figma.* sources from React target build. |
| packages/components/configs/vue/mitosis.config.cjs | Excludes *.figma.* sources from Vue target build. |
| packages/components/configs/stencil/mitosis.config.cjs | Excludes *.figma.* sources from Stencil target build. |
| packages/components/configs/mitosis.figma.config.cjs | Adds dedicated Mitosis config to generate Code Connect packages to figma-code-connect/. |
| packages/components/configs/plugins/figma/index.cjs | Implements a Mitosis plugin that emits figma.connect(...) modules from useMetadata({ figma: ... }). |
| package.json | Adds figma-code-connect/* as workspaces and adds @figma/code-connect dev dependency. |
| package-lock.json | Locks the new dependency and workspaces. |
| figma-code-connect/angular-figma/package.json | Defines Angular Code Connect workspace scripts (connect/test). |
| figma-code-connect/angular-figma/figma.config.json | Configures Code Connect parsing for Angular (html parser). |
| figma-code-connect/angular-figma/tsconfig.json | Adds TS config for Angular Code Connect workspace. |
| figma-code-connect/angular-figma/vitest.config.ts | Adds Vitest config for Angular Code Connect workspace. |
| figma-code-connect/angular-figma/test/parse.spec.ts | Adds snapshot-based parse test for generated connectors. |
| figma-code-connect/angular-figma/test/publish.spec.ts | Adds publish dry-run test for generated connectors. |
| figma-code-connect/angular-figma/test/snapshots/parse.spec.ts.snap | Stores expected parse output snapshot. |
| figma-code-connect/react-figma/package.json | Defines React Code Connect workspace scripts (connect/test). |
| figma-code-connect/react-figma/figma.config.json | Configures Code Connect parsing for React (react parser). |
| figma-code-connect/react-figma/tsconfig.json | Adds TS config for React Code Connect workspace. |
| figma-code-connect/react-figma/vitest.config.ts | Adds Vitest config for React Code Connect workspace. |
| figma-code-connect/react-figma/test/parse.spec.ts | Adds snapshot-based parse test for generated connectors. |
| figma-code-connect/react-figma/test/publish.spec.ts | Adds publish dry-run test for generated connectors. |
| figma-code-connect/vue-figma/package.json | Defines Vue Code Connect workspace scripts (connect/test). |
| figma-code-connect/vue-figma/figma.config.json | Configures Code Connect parsing for Vue (html parser). |
| figma-code-connect/vue-figma/tsconfig.json | Adds TS config for Vue Code Connect workspace. |
| figma-code-connect/vue-figma/vitest.config.ts | Adds Vitest config for Vue Code Connect workspace. |
| figma-code-connect/vue-figma/test/parse.spec.ts | Adds snapshot-based parse test for generated connectors. |
| figma-code-connect/vue-figma/test/publish.spec.ts | Adds publish dry-run test for generated connectors. |
| figma-code-connect/vue-figma/test/snapshots/parse.spec.ts.snap | Stores expected parse output snapshot. |
| .gitignore | Ignores generated figma-code-connect/**/src/ output directories. |
| .github/workflows/default.yml | Integrates build/test/publish jobs for Code Connect into the default pipeline. |
| .github/workflows/01-build-figma-code-connect.yml | Adds reusable workflow to generate and upload the Code Connect artifact. |
| .github/workflows/02-test-figma-code-connect.yml | Adds reusable workflow to run Code Connect parsing/publish dry-run tests. |
| .github/workflows/03-publish-figma-code-connect.yml | Adds reusable workflow to publish Code Connect packages via CLI. |
| .env.template | Adds FIGMA_FILE variable documentation/template entry. |
| .config/cspellignorewords.txt | Adds figd to spellcheck ignore list (token prefix in docs). |
Comments suppressed due to low confidence (5)
figma-code-connect/vue-figma/test/publish.spec.ts:12
- This test contains a redundant
worksvariable and assertion;execSync(...)will already fail the test by throwing if the command fails. Consider removing the dummy assertion (and the unnecessaryasync).
test('check if publish dry-run works', async () => {
const works = true;
execSync(
'npx figma connect publish --dry-run --exit-on-unreadable-files'
);
expect(works).toBeTruthy();
});
figma-code-connect/angular-figma/test/publish.spec.ts:12
- This test contains a redundant
worksvariable and assertion;execSync(...)will already fail the test by throwing if the command fails. Consider removing the dummy assertion (and the unnecessaryasync).
test('check if publish dry-run works', async () => {
const works = true;
execSync(
'npx figma connect publish --dry-run --exit-on-unreadable-files'
);
expect(works).toBeTruthy();
});
packages/components/docs/how-to-figma-connect.md:48
- Typo: "When coping a link" should be "When copying a link" (and consider capitalizing "Figma").
packages/components/docs/how-to-figma-connect.md:103 - Typo/grammar: "The generates files" should be "The generated files".
figma-code-connect/react-figma/test/publish.spec.ts:12 - This test contains a redundant
worksvariable and assertion;execSync(...)will already fail the test by throwing if the command fails. Consider removing the dummy assertion (and the unnecessaryasync).
test('check if publish dry-run works', async () => {
const works = true;
execSync(
'npx figma connect publish --dry-run --exit-on-unreadable-files'
);
expect(works).toBeTruthy();
});
# Conflicts: # .config/cspellignorewords.txt # package-lock.json # package.json
sarahbrng
moved this from 🎁 Ready for review
to 👀 Actively In Review
in UX Engineering Team Backlog
sarahbrng
reviewed
Mar 5, 2026
Contributor
sarahbrng
left a comment
sarahbrng
left a comment
There was a problem hiding this comment.
I assume this will be available when the branch is merged?
packages/components/src/components/button/figma/text.button.figma.lite.tsx
Show resolved
Hide resolved
packages/components/src/components/button/figma/button.figma.ts
Outdated
Show resolved
Hide resolved
packages/components/src/components/button/figma/button.figma.ts
Outdated
Show resolved
Hide resolved
sarahbrng
moved this from 👀 Actively In Review
to 🎶 Waiting for feedback
in UX Engineering Team Backlog
# Conflicts: # .github/workflows/default.yml
nmerget
moved this from 🎶 Waiting for feedback
to 🎁 Ready for review
in UX Engineering Team Backlog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed changes
closes #3428
Types of changes
Further comments
🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-code-connect